<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.Action
				  //Action 提交的是 mutation，而不是直接变更状态
				  //Action 可以包含任意异步操作
				  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
				       const store = new Vuex.Store({
							  state: {
							    count: 0
							  },
							  mutations: {
							    increment (state) {
							      state.count++
							    }
							  },
							  actions: {
								    increment (context) {
								        context.commit('increment')
								    },
								    increment ({ commit }) {
								    	//使用对象解构赋值简化代码
									    commit('increment')
									}
							  }
					  })
		    //2.分发Action
		          //分发 ActionAction 通过 store.dispatch 方法触发：store.dispatch('increment')
		          //可以在action内部执行异步操作
		                 actions: {
							  incrementAsync ({ commit }) {
							    setTimeout(() => {
							      commit('increment')
							    }, 1000)
							  }
						 }
		          //Actions 支持同样的载荷方式和对象方式进行分发
		                    // 以载荷形式分发
							store.dispatch('incrementAsync', {
							  amount: 10
							})
							
							// 以对象形式分发
							store.dispatch({
							  type: 'incrementAsync',
							  amount: 10
							})
		    //3.在组件中分发Action
		        //你在组件中使用 this.$store.dispatch('xxx') 分发 action，
		        //或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
		                    import { mapActions } from 'vuex'
							export default {
							  // ...
							  methods: {
							    ...mapActions([
							      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
							
							      // `mapActions` 也支持载荷：
							      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
							    ]),
							    ...mapActions({
							      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
							    })
							  }
							}
		</script>
	</body>
</html>
